{% extends "base.html" %}
{% block content %}
{% with title="Profile" %}
{% include 'includes/_mini_slide.html' %}
{% endwith %}

<div class="container">
    <div class="p-5">
    {% include "/includes/_messages.html" %}
    <div class="section-heading text-center">
        <h1>Profile</h1>
    </div>
  	<hr>
        {% from "/includes/_formhelpers.html" import render_field %}
        <form class="form-horizontal" role="form" action="" method="post">
            {{ form.csrf_token() }}
          <div class="form-group">
            <label class="col-md-4 control-label">Username:</label>
            <div class="col-md-6">
                <input type="text" class="form-control" value={{user.username}} style="font-size: 1.5rem;" disabled>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Name:</label>
            <div class="col-md-6">
                {{render_field(form.name, type="text", id="name", class="form-control", style="font-size: 1.5rem;", value=user.name, disabled="disabled")}}
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Address:</label>
            <div class="col-md-6">
                {{render_field(form.address, type="text", id="address", class="form-control", style="font-size: 1.5rem;", value=user.address, disabled="disabled")}}
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Phone Number:</label>
            <div class="col-md-6">
                {{render_field(form.phone_number, type="tel", id="phone_number", class="form-control", style="font-size: 1.5rem;",
                value=user.phone_number, pattern= '^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$', disabled="disabled")}}
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-6" id="submit-div">
                <input type="reset" id="edit" class="btn btn-primary" value="Edit Profile" style="font-size: 1.5rem;">


            </div>
          </div>
        </form>
    </div>
</div>

<hr>

<script src="{{url_for('static', filename='profile.js')}}"></script>

{% endblock %}